<template>
  <el-dialog v-model="dialogVisible" title="环境管理" class="environment-dialog" width="1000">
    <EditEnvTable @change-edit-method="changeEditMethod" :data="environmentTable" @all-table-data="handleAllTableData" />
    <template #footer>
      <el-button type="primary" @click="submitForm">保存</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
    <multipleEdit ref="multipleEditRef" :editorValue="editorValue" @update-editor-value="updateEditorValue"
      @text-to-json="handleTextToJSON" />
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import EditEnvTable from '@/components/EditEnvTable.vue';
import multipleEdit from './MultipleEdit.vue'
import { evnjsonToTableData, evntableDataToJson } from '@/utils/index'
import { useMessage } from '@/hooks/useMessage';
const dialogVisible = ref(false) // 弹窗的是否展示
const environmentParams = computed(() => JSON.parse(localStorage.getItem('environmentParams') || '[]'))
const environmentTable = ref([])
const editorValue = ref('')
const multipleEditRef = ref()
const message = useMessage() // 消息弹窗
/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
  getList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/**
 * 响应批量编辑
 * */
const changeEditMethod = (tableData: any) => {
  multipleEditRef.value.open(tableData)
}
/**
 * 表格全部数据
 * */
const handleAllTableData = (data: any) => {
  editorValue.value = JSON.stringify(evntableDataToJson(data))
  environmentTable.value = data
}

/**
 * 批量数据编辑后回显到表格
 * */
const updateEditorValue = (data: any) => {
  environmentTable.value = evnjsonToTableData(JSON.parse(data))
}
/**
 * 弹窗中text改变，触发editor改变
 * */
const handleTextToJSON = (data: any) => {
  editorValue.value = JSON.stringify(data)
}

/** 提交-保存环境变量 */
const submitForm = async () => {
  if (environmentTable.value.length !== 0) {
    if (environmentTable.value[environmentTable.value.length - 1].varName === '') {
      environmentTable.value.splice(environmentTable.value.length - 1, 1);
    }
  }
  localStorage.setItem('environmentParams', JSON.stringify(environmentTable.value))
  message.success('保存成功')
  dialogVisible.value = false
}


/**获取环境变量列表 */
const getList = async () => {
  const varList = environmentParams.value
  environmentTable.value = typeof varList == 'string' ? JSON.parse(varList) : varList
  handleAllTableData(environmentTable.value)
}

</script>


<style lang="scss">
.environment-dialog {

  //padding-top: 0;
  //padding-left: 0;
  .menu {
    background-color: transparent;
    border-right: 1px solid var(--menu-border-color);
    height: 100%;
    width: 25%;
    padding-left: 2%;
    padding-bottom: 2%;

    .menu-title {
      padding-top: .5rem;
      padding-bottom: .5rem;
      opacity: .5;
      font-size: .75rem;
    }

    .operation-list {
      p {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        margin: 0 0 10px 0;
        cursor: pointer;

        .el-icon {
          margin-right: 10px;
        }

        &:last-child {
          border: none;
          margin-bottom: 0;
          padding: 0;
        }
      }
    }

    .menutext {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .main {
    width: 73%;
    padding: 1%;

    .main-titile {
      font-size: 16px;
      // color: #344054;
      padding: 0 0 15px 15px;

      .edit-button {
        margin-left: 1%;
        padding: 0;
        height: 25px;
        width: 25px;
      }
    }

    .main-content {
      display: flex;
      flex-direction: column;

      .content-title {
        margin: 15px 12px 8px;
        font-size: 14px;
        // color: #344054;
      }
    }
  }

  >.el-dialog__footer {
    padding-top: 0;
  }

  .el-table__body-wrapper {
    left: 10px;
  }

  .el-table th.is-leaf {
    border: none;
  }

  .el-table__inner-wrapper:before {
    height: 0;
  }
}
</style>

<style scoped lang="scss">
.environment-dialog {
  .el-menu {
    background-color: transparent;
    border-right: 0;
  }

  .el-menu-item {
    height: 2rem;
    line-height: 2rem;
    font-size: 14px;
    // color: #344054;
    display: flex;
    justify-content: space-between;

    i {
      font-size: 12px;
    }
  }

  .el-menu-item.is-active {
    background-color: rgba(64, 158, 255, .1);
    color: #409eff;
  }

  .el-popover.el-popper {
    min-width: 100px !important;
  }
}

:deep(.el-table td.el-table__cell div) {
  background: transparent;
}

:deep(.el-table tr) {
  background: transparent !important;
}
</style>

<style>
.el-popover.my-popper {
  min-width: 100px !important;
}
</style>
